<script setup>
// 模拟文件列表数据
const fileList = [
  {
    id: 1,
    icon: '/static/image/wenj.png',
    title: '全员共享文件夹',
    updateTime: '2023-10-12 12:09:00'
  },
  {
    id: 2,
    icon: '/static/image/wenj.png',
    title: '母校行相关视频介绍',
    updateTime: '2023-10-12 12:09:00'
  }
];
const navigateToDetail = (id) => {

  uni.navigateTo({
    url: `/pages/work1/inziliao?id=${id=1}`,
    url: `/pages/work1/inziliao?id=${id=2}`
  });

};

</script>



<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <image src="/static/image/3.4.png" class="search-icon"></image>
      <input type="text" placeholder="请输入文件名称关键词查询" class="search-input"></input>
    </view>
    <!-- 文件列表 -->
    <view class="file-list">
      <view class="file-item" v-for="(item, index) in fileList" :key="index" @click="navigateToDetail(item.id)">
        <image :src="item.icon" class="file-icon"></image>
        <view class="file-info">
          <text class="file-title">{{ item.title }}</text>
          <text class="file-update-time">{{ item.updateTime }} 更新</text>
        </view>
        <image src="/static/image/right_arrow.png" class="right-arrow"></image>
      </view>
    </view>
  </view>
</template>


<style scoped>
.container {
  padding: 15px;
  background-color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 15px;
}

.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background-color: transparent;
}

.file-list {
  /* 可以根据需要设置列表的样式，例如间距等 */
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.file-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.file-info {
  flex: 1;
}

.file-title {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.file-update-time {
  display: block;
  font-size: 12px;
  color: #999;
}

.right-arrow {
  width: 16px;
  height: 16px;
}
</style>